<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/jquery.Jcrop.min.css" media="all">
<script type="text/javascript" src="__PUBLIC__/Js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Js/uploadify-v3.1/uploadify.css" media="all">
<script type="text/javascript" src="__PUBLIC__/Js/uploadify-v3.1/jquery.uploadify-3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Js/ThinkBox/css/ThinkBox.css" media="all">
<script type="text/javascript" src="__PUBLIC__/Js/ThinkBox/jquery.ThinkBox.js"></script>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/uploadimage.css" media="all">

<title>Upload</title>
</head>

<body>
<div class="main">
<!-- 修改头像 -->
<form action="__URL__/cropImg" method="post" id="pic" class="update-pic cf">
	<div class="preview-area">
		<input type="hidden" id="x" name="x" />
		<input type="hidden" id="y" name="y" />
		<input type="hidden" id="w" name="w" />
		<input type="hidden" id="h" name="h" />
		<input type="hidden" id='img_src' name='src'/>
		<div class="tcrop">图片预览</div>
		<div class="crop crop220_150"><img id="crop-preview-100" src="" alt="" style="width:200px;height:200px"></div>
		<!--div class="crop crop60"><img id="crop-preview-60" src="" alt=""></div-->
		<a class="uppic-btn save-pic" id="saveImg" href="javascript:;">保存</a>
		<a class="uppic-btn" id="cancelImg" href="javascript:$('#user-pic').uploadify('cancel','*');">重选图片</a>
	</div>
	<div class="upload-area" id="selectImg">
		<input type="file" id="user-pic">
		<div class="file-tips">支持JPG,PNG,GIF，图片小于1MB，尺寸不小于100*100,真实高清图片更受欢迎！</div>
		<div class="preview hidden" id="preview-hidden"></div>
	</div>
</form>
<!-- /修改头像 -->
</div>
<script type="text/javascript">
	$(function(){		
		//上传头像(uploadify插件)
		$("#user-pic").uploadify({
			'queueSizeLimit' : 1,
			'removeTimeout' : 0.5,
			'preventCaching' : true,
			'multi'    : false,
			'swf' 			: '__PUBLIC__/Js/uploadify-v3.1/uploadify.swf',
			'uploader' 		: '{:U("Change/uploadImg")}',
			'buttonText' 	: '<i class="userup-icon"></i>上传图片',
			'width' 		: '200',
			'height' 		: '200',
			'fileTypeExts'	: '*.jpg; *.png; *.gif;',
			'onUploadSuccess' : function(file, data, response){	//返回成功
				var data = $.parseJSON(data);	//JSON转数组
				if(data['status'] == 0){	//上传出错
					$.ThinkBox.error(data['info'],{'delayClose':3000});
					return;
				}
				var preview = $('.upload-area').children('#preview-hidden');	//把隐藏的“图片显示”div
				preview.show().removeClass('hidden');							//显示出来
				//两个预览窗口赋值
				$('.crop').children('img').attr('src',data['data']+'?random='+Math.random());
				//隐藏表单赋值
				$('#img_src').val(data['data']);
				//绑定需要裁剪的图片
				var img = $('<img />');
				preview.append(img);
				preview.children('img').attr('src',data['data']+'?random='+Math.random());
				var crop_img = preview.children('img');
				crop_img.attr('id',"cropbox").show();
				var img = new Image();
				img.src = data['data']+'?random='+Math.random();
				//根据图片大小在画布里居中
				img.onload = function(){
					var img_height = 0;
					var img_width = 0;
					var real_height = img.height;
					var real_width = img.width;
					if(real_height > real_width && real_height > 200){
						var persent = real_height / 200;
						real_height = 200;
						real_width = real_width / persent;
					}else if(real_width > real_height && real_width > 200){
						var persent = real_width / 200;
						real_width = 200;
						real_height = real_height / persent;
					}
					if(real_height < 200){
						img_height = (200 - real_height)/2;	
					}
					if(real_width < 200){
						img_width = (200 - real_width)/2;
					}
					preview.css({width:(200-img_width)+'px',height:(200-img_height)+'px'});
					preview.css({paddingTop:img_height+'px',paddingLeft:img_width+'px'});			
				}
				//裁剪插件
				$('#cropbox').Jcrop({
		            bgColor:'#333',   //选区背景色
		            bgFade:true,      //选区背景渐显
		            fadeTime:1000,    //背景渐显时间
		            allowSelect:false, //是否可以选区，
		            allowResize:true, //是否可以调整选区大小
		            aspectRatio: 1,     //约束比例
		            minSize : [100,100],//可选最小大小
		            aspectRatio:100/100,//宽高比例
		            boxWidth : 200,		//画布宽度
		            boxHeight : 200,	//画布高度
		            onChange: showPreview,//改变时重置预览图
		            onSelect: showPreview,//选择时重置预览图
		            setSelect:[ 0, 0, 100, 100],//初始化时位置
		            onSelect: function (c){	//选择时动态赋值，该值是最终传给程序的参数！
			            $('#x').val(c.x);//需裁剪的左上角X轴坐标
			            $('#y').val(c.y);//需裁剪的左上角Y轴坐标
			            $('#w').val(c.w);//需裁剪的宽度
			            $('#h').val(c.h);//需裁剪的高度
		          }
		        });
				//提交裁剪好的图片
				$('.save-pic').click(function(){
					if($('#preview-hidden').html() == ''){
						$.ThinkBox.error('请先上传图片！');
					}else{
						//由于GD库裁剪gif图片很慢，所以长时间显示弹出框
						$.ThinkBox.success('图片处理中，请稍候……',{'delayClose':30000});
						$('#pic').submit();
					}
				});
				//重新上传,清空裁剪参数
				var i = 0;
				$('.reupload-img').click(function(){
					$('#preview-hidden').find('*').remove();
					$('#preview-hidden').hide().addClass('hidden').css({'padding-top':0,'padding-left':0});
					
				});
		     }
		});
		//预览图
		function showPreview(coords){
			var img_width = $('#cropbox').width();
			var img_height = $('#cropbox').height();
			  //根据包裹的容器宽高,设置被除数
			  var rx = 200 / coords.w;
			  var ry = 200 / coords.h; 
			  $('#crop-preview-100').css({
			    width: Math.round(rx * img_width) + 'px',
			    height: Math.round(ry * img_height) + 'px',
			    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
			    marginTop: '-' + Math.round(ry * coords.y) + 'px'
			  });
		}
		/* 载入页面时，根据上级页面内容显示不同的东西 */
		if(window.parent.form1.imageShow.src != ""){
			var ImgObj = window.parent.form1.imageShow;
		    if ($(ImgObj).width() > 0 && $(ImgObj).height() > 0) {  
				document.getElementById('crop-preview-100').src=window.parent.form1.imageShow.src;
		    } else {
		        return false;
		    }  
		}
	})
	
</script>

</body>

</html>